<template>
	<view class="activityDetails">
		<view class="title" style="position: relative;"> 业绩：<text class="yj">{{main.achievement}}</text> 
		<view class="con-but" type="default" @click="turnAll()"> 全部提现 </view>
		</view>
		<view class="con-box">
			<view class="con">
				<view class="con-tiltle"> 提现业绩值： </view>
				<input class="con-ipnut" type="number" v-model="formData.money" placeholder="请输入提现业绩值" value=""  @input="moneyChange($event)" />
			</view>
		</view>
		<view class="con-box">
			<view class="con">
				<view class="con-tiltle"> 所需手续费： </view>
				<view class="con-num"> {{process}} </view>
			</view>
			<view class="con-p"> {{main.ratio_remark}} </view>
		</view>
		<view class="con">
			<view class="con-tiltle"> 提现类型： </view>
			<view class="" style="display: flex; font-size: 26rpx;">
				<view class="con2-radio" @click="selNo(item.itemId)" v-for="(item, index) in main.typeList" :key="index">
					<view :class="['sel-box', formData.type == item.itemId ? 'sel' : 'nosel']"> </view>
					{{item.itemName}}
				</view>
			</view>
		</view>
		<view class="con-box">
			<view class="con">
				<view class="con-tiltle"> 收款帐号： </view>
				<input class="con-ipnut" type="text" v-model="formData.arrival" placeholder="请输入提现类型的收款帐号" value="" />
			</view>
		</view>
		<textarea class="bz-text" v-model="formData.remark" value="" placeholder=" 备注,如果提现方式为 '银行卡',请备注银行卡 '支行信息' " />
		<view class="con-p"> 温馨提示：预计1-3个工作日处理。 </view>
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="but" @click="apply()">申请</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				main: {
					achievement: 0,
					mobile : 0,
					ratio: '10%',
					ratio_remark: '',
					typeList: []
				},
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					money: '',
					type: 1,
					arrival: '',
					remark: ''
				},
				process: 0
			}
		},
		methods: {
			getMain(){
				serve.request({
					url: '/spread/increase/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					}
				}).then(res => {
					_self.main = res.data;
				});
			},
			moneyChange(e) {
				if(_self.main.ratio == 0) {
					return ;
				}
				_self.process = _self.numFilter((_self.formData.money * _self.main.ratio) / 100);
			},
			selNo(index) {
				_self.formData.type = index;
			},
			turnAll() {
				let money = _self.main.achievement / (Number(1) + Number(_self.main.ratio / 100));
				_self.formData.money = _self.numFilter(money);
				_self.process = _self.numFilter(_self.main.achievement - _self.formData.money);
			},
			apply(){
				console.info(_self.formData.money);
				if(_self.formData.money == "") {
					uni.showToast({
						title: '请填写提现金额',
						icon: 'none'
					});
					return ;
				}
				if(_self.formData.arrival == "") {
					uni.showToast({
						title: '请输入提现类型的收款帐号',
						icon: 'none'
					});
					return ;
				}
				if(_self.formData.type== 3 && _self.formData.remark == "") {
					uni.showToast({
						title: '请填写提现银行卡的相关支行信息',
						icon: 'none'
					});
					return ;
				}
				serve.request({
					url: '/spread/increase/withdraw',
					data: _self.formData
				}).then(res => {
					let resuleCode = res.code;
					let resultMessage = res.message;
					uni.showToast({
						title: resultMessage,
						icon: 'none',
						success() {
							if(resuleCode == 200){
								setTimeout(function() {
									uni.redirectTo({
										url: '/business/deposit_list'
									});
								}, 2000);
							}
						}
					});
				});
			},
			numFilter (value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad() {
			_self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
			_self.getMain();
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	.title{    line-height: 100rpx;
	border-bottom: 2rpx solid #ededed;}
	.yj{
		color: #dd6161;
	}
	
	.con{
		display: flex;
		position: relative;
		align-items: center;
		height: 100rpx;
		border-bottom: 2rpx solid #ededed;
	}
	.con-tiltle{}
	.con-ipnut{
		height: 80rpx;
		padding-left: 20rpx;
		color: #dd6161;
		font-size: 30rpx;
	}
	.con-num{
		color: #dd6161;
	}
	.con-but{
		position: absolute;
		right: 0;
		top: 18rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		color: #ffffff;
		padding: 10rpx 16rpx;
		background: #FFBC00;
		border-radius: 8rpx;
	}
	.con-p{padding: 10rpx 0;font-size: 28rpx;color: #999;}
	
	.bz-text{
		border: 2rpx solid #ededed;
		padding: 10rpx;
		margin-top: 20rpx;
		width: 100%;
		height: 200rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	
	
	.con2-radio{
		height: 60rpx;
		width: 140rpx;
		display: flex;
		align-items: center;
		margin: 10rpx;
	}
	.sel-box{
		margin-right: 12rpx;
	}
	.sel {
		background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
		background-repeat: no-repeat;
		width: 40rpx;
		height: 40rpx;
		background-size: 100%;
	}
					
	.nosel {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
	
	
	
	
	
	
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}

</style>
